<template>
  <div class="400yw">
    <Table :tableData="paneA.tableDataA" @blur="handleBlur" />
    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        选择产品：
      </span>
      <br />
      <el-checkbox-group v-model="paneA.checkedOptions">
        <el-checkbox
          v-for="option in paneA.options"
          :label="option"
          :key="option"
          :disabled="option === '400语音产品'"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
    </section>
    <Card
      v-if="paneA.checkedOptions.length"
      :title="paneA.checkedOptions[0]"
      style="margin-top: 10px"
    >
      <section>
        <span class="title" style="margin-top: 0">
          <i class="el-icon-star-on"></i>
          产品资费：
        </span>
        <br />
        <el-checkbox-group v-model="paneA.checkedOptionsB">
          <el-checkbox
            v-for="option in paneA.optionsB"
            :label="option"
            :key="option"
          >
            {{ option }}
          </el-checkbox>
        </el-checkbox-group>
      </section>
      <section>
        <span class="title">
          <i class="el-icon-star-on"></i>
          产品属性：
        </span>
        <br />
        <el-form size="mini" inline>
          <el-form-item label="400号码">
            <el-input v-model="paneA.formA.valA"></el-input>
          </el-form-item>
          <el-form-item label="预占单流水号">
            <el-input v-model="paneA.formA.valB"></el-input>
          </el-form-item>
        </el-form>
      </section>
    </Card>
    <Card
      v-if="paneA.checkedOptions.includes('400语音呼叫阻截')"
      :title="paneA.checkedOptions[1]"
      style="margin-top: 10px"
    >
      <section>
        <span class="title" style="margin-top: 0">
          <i class="el-icon-star-on"></i>
          产品资费：
        </span>
        <br />
        <el-checkbox-group v-model="paneA.checkedOptionsA">
          <el-checkbox
            v-for="option in paneA.optionsA"
            :label="option"
            :key="option"
          >
            {{ option }}
          </el-checkbox>
        </el-checkbox-group>
      </section>
      <section>
        <span class="title">
          <i class="el-icon-star-on"></i>
          产品属性：
        </span>
        <br />
        <el-form size="mini" inline>
          <el-form-item label="400号码">
            <el-input v-model="paneA.formA.valA"></el-input>
          </el-form-item>
          <el-form-item label="呼叫阻截省">
            <el-input v-model="paneA.formB.valB"></el-input>
          </el-form-item>
        </el-form>
      </section>
    </Card>
    <section style="margin-bottom: 20px">
      <span class="title">
        <i class="el-icon-star-on"></i>
        其他信息：
      </span>
      <br />
      <Table :tableData="paneA.tableData" />
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },

  data() {
    return {
      paneA: {
        formA: {
          valA: '',
          valB: ''
        },
        formB: {
          valA: '',
          valB: ''
        },
        dialogVisible: false,
        checkedOptionsA: ['400语音免费资源'],
        optionsA: ['400语音免费资源', '100元每月'],
        checkedOptionsB: ['400语音免费资源'],
        optionsB: ['400语音免费资源', '100元每月'],
        checkedOptions: ['400语音产品'],
        options: [
          '400语音产品',
          '400语音呼叫阻截',
          '400语音密码接入',
          '400短信',
          '400外呼',
          '云客服'
        ],
        tableData: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        },
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '客户编码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '客户所在地',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '是否VIP',
              type: 'Input'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: ''
            }
          ]
        }
      }
    }
  },

  methods: {
    handleBlur() {
      this.paneA.tableData.row = [
        {
          colA: '马菲',
          colB: '13545896233'
        }
      ]
      this.paneA.tableDataA.row = [
        {
          colA: '方石集团',
          colB: 'A3265412547',
          colC: '河北',
          colD: '是'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: block;
  margin-top: 30px;
}
</style>
